.about{
    width: 66.5%;
    float: right;
    margin: 0px;

}
/* 星巴克在中国 */
.china{
    color: white;
    margin-top: 5%;
    text-align: center;

}
/* 星巴克在中国  背景图*/
#header img{
    position: absolute;
    width: 66.5%;
    height: 30%;
    top: 1px;
    left: 24.4%;
    z-index: -1;
}

/********************************************/
/* 历史、门店以及责任整块内容样式 */
.biaoqian{
    display: grid;
    grid-template-columns: repeat(3, 32%);
    /* grid-template-rows: 60% 60%; */
    list-style-type:none;
    /* padding: 2px 3px; */
    align-content:stretch;
    text-align: center;
    margin-top: 8%;

}
/* 历史、门店以及责任  内容 */
.card{
    /* border: 1px solid rgb(42, 173, 59); */
    width: 80%;
    padding-bottom: 50%;
    margin: 25px 25px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);

}
/* 历史、门店以及责任  链接样式 */
.link{
    text-decoration: none;
    color: rgb(9, 134, 86);
    font-size: 25px;
}
/* 绿色区域 */
.font{
    width: 100%;
    border-top: 4px solid #00653e;
    color: white;
    text-align: center;
    background-color: #00a862;
    font-size: 45px;
    font-family: Arial, Helvetica, sans-serif;
}
/* .icon{
    height: 16%;
    width: 15%;
} */
.introduce{
    font-size: 22px;
    font-weight: 1px;
    margin: 5px;
}
/* 历史、门店以及责任  具体内容 */
.contents p{
    text-align: left;
    color: #444;
    font-size: 16px;
    padding: 2px 15px;
}

/********************************************/
/* 我们的使命与价值  最新新闻  字体 */
h2{
    font-size: 26px;
    color: #c2a665;
    text-align: center;
    font-family: '黑体';
    margin-bottom: 20px;
}
/* 布局  flex */
.flex{
    display: flex;
    flex-direction: row;
    /* background-color: #f7f7f7; */
}
.value{
    font-size: 18px;
    margin-left: 7%;
    color: #212121;
}
div img{
    width: 82%;
    height: 76%;
    margin-left: 9%;
    margin-right: 9%;
    /* margin-top: 10%; */
}
/* 加入我们的按钮样式   #00a862*/
.about-join-us{
    width: 100px;
    /* font-size: 18px; */
    border-radius: 20px;
    background-color: white;
    /* color: #4CAF50; */
    border: 1px solid #4CAF50; 
    padding: 5px;
    margin:10px;
}
.about-join-us>a{
    color: #4CAF50;
    font-size: 18px;

}
/* 新闻卡片动画样式animate__pulse */
.pulse:hover{
    animation: pulse 1s;
}



/********************************************/
/* 最新新闻 */
/* 列表中每一小块的布局设置  flex */
.list{
    width: 95%;
    list-style-type:none;
    padding: 20px;
    margin-left: 4%;
}
/* 每一张卡片  链接 的样式 */
.detail{
    text-decoration: none;
}
/* 卡片中  标题样式 */
h3{
    color: black;
    font-family: Georgia, 'Times New Roman', Times, serif,'黑体';
    font-size: 23px;
}
/* 一块卡片 */
.detail{
    width: 100%;
    height: 180px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    border: 1px solid rgb(224, 224, 224);
    /* box-shadow   为卡片设置阴影 */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* 卡片右侧图片 */
.detail>img{
    width: 150px;
    height: auto;
    margin: 0;
}
/* 卡片左侧文字 */
.left-c{
    margin-left: 15px;
}
/* 卡片左侧文字 */
.left-c p{
    font-size: 17px;
}
/* 所有新闻  链接 */
.all{
    width: 100px;

    border-radius: 20px;
    background-color: white;
    border: 1px solid #4CAF50; 
    padding: 5px;
    margin-left: 45%;
    margin-bottom: 20px;
}
.all>a{
    color: #4CAF50;    
    font-size: 18px;
}

/********************************************/
/* 隐藏下拉列表中的  h2标题 */
/* 下拉内容 */
.card-us{
    width: 91%;
    /* padding-bottom: 50%; */
    margin-left: 65px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
}
.card-header{
    padding-top: 10px;
    background-color: #fff;
    border: none;
}
span>img{
    width: 18px;
    height: 18px;
    float: right;
    margin-top: 10px;
    margin-right: 5px;
}
.miaoshu{
    font-size: 17px;
    padding-top: 10px;
    color: #888;
}
.accordion{
    margin-top: 20px;
}
.us{
    height: 400px;
}
/* 箭头方向的变化 */
.jiantou:hover{
    transform: rotate(180deg);
}







